<!doctype html>
<html prefix="og: http://ogp.me/ns#" itemscope itemtype="http://schema.org/CreativeWork">
  <head>
    <meta charset="utf-8">
    <title>Patatap</title>

    <meta name="keywords" content="patatap, neuronal synchrony, music, audio, visual, app, 2d, jonobr1, lullatone, synesthesia">
    <meta name="author" content="jonobr1">

    <!-- Sharing -->
    <meta name="name" content="Patatap">
    <meta name="image" content="http://www.patatap.com/images/thumbnail.png">
    <meta name="description" content="Patatap is a portable animation and sound kit. With the touch of a finger create melodies charged with moving shapes. Warning: contains flashing images.">

    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Patatap">
    <meta name="twitter:description" content="Patatap is a portable animation and sound kit. With the touch of a finger create melodies charged with moving shapes. Warning: contains flashing images.">
    <meta name="twitter:creator" content="@jonobr1">
    <meta name="twitter:image:src" content="http://www.patatap.com/images/thumbnail.png">
    <meta name="twitter:app:name:iphone" content="Patatap">
    <meta name="twitter:app:name:ipad" content="Patatap">
    <meta name="twitter:app:url:iphone" content="https://itunes.apple.com/us/app/patatap/id880626868?mt=8">
    <meta name="twitter:app:url:ipad" content="https://itunes.apple.com/us/app/patatap/id880626868?mt=8">
    <meta name="twitter:app:id:iphone" content="id880626868">
    <meta name="twitter:app:id:ipad" content="id880626868">
    <meta name="twitter:app:name:googleplay" content="Patatap">
    <meta name="twitter:app:id:googleplay" content="com.jonobr1.Patatap">
    <meta name="twitter:app:url:googleplay" content="https://play.google.com/store/apps/details?id=com.jonobr1.Patatap">

    <meta itemprop="name" content="Patatap">
    <meta itemprop="description" content="Patatap is a portable animation and sound kit. With the touch of a finger create melodies charged with moving shapes. Warning: contains flashing images.">
    <meta itemprop="image" src="http://www.patatap.com/images/thumbnail.png">

    <meta property="og:title" content="Patatap">
    <meta property="og:type" content="website">
    <meta property="og:image" content="http://www.patatap.com/images/thumbnail.png"/>
    <meta property="og:site_name" content="Patatap">
    <meta property="og:description" content="Patatap is a portable animation and sound kit. With the touch of a finger create melodies charged with moving shapes. Warning: contains flashing images.">

    <!-- iOS specific catches -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <meta name="format-detection" content="telephone=no">

    <!-- icons -->
    <link rel="apple-touch-icon" href="./images/apple-touch-icon.png"/>
    <link rel="icon" href="./images/favicon.ico" />

    <!-- styles -->
    <link href='//fonts.googleapis.com/css?family=Inconsolata:400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" media="screen" type="text/css" href="./styles/main.css" />

  </head>
  <body>
    <h1 style="width: 0; height: 0; overflow: hidden;">
      Patatap is a portable animation and sound kit. With the touch of a finger create melodies charged with moving shapes. Warning: contains flashing images.
    </h1>
    <div id="credits" style="display: none;">
      <ul>
        <li>
          <a href="http://patatap.com" target="_blank" style="border-bottom: 0;"><strong>Patatap</strong></a>
        </li>
        <li>
          <a href="http://typatone.com" target="_blank">Typatone</a>
        </li>
        <li>
          <a href="mailto:inquiries@patatap.com">Inquiries</a>
        </li>
        <li>
          <a id="embed-button" href="#" title="Embed Patatap on your site">Embed</a>
        </li>
        <li>
          <a id="merchandise-button" href="#" title="Support the creators of Patatap">Merchandise</a>
        </li>
        <li>
          <a id="jonobr1" href="http://jonobr1.com/" target="_blank">jonobr1</a> + <a id="lullatone" href="http://lullatone.com/" target="_blank">lullatone</a>
        </li>
      </ul>
    </div>
    <div id="content"></div>
    <div id="hint" style="display: none;">
      <p class="message"></p>
      <!-- <a class="ios-app-store" href="https://itunes.apple.com/us/app/patatap/id880626868?ls=1&mt=8" target="_blank"></a>
      <a class="play-store" href="https://play.google.com/store/apps/details?id=com.jonobr1.Patatap" target="_blank"></a> -->
    </div>
    <div id="embed" style="display: none;">
      <!-- <textarea><iframe src="//patatap.com/" style="border: 3px solid #ccc" width="640" height="480"></iframe></textarea> -->
    </div>
    <div id="merchandise" style="z-index: -1; opacity: 0.0;">
      <div class="container">
        <div id="close-merchandise">&times;</div>
        <div class="vimeo">
          <!-- <iframe src="//player.vimeo.com/video/95057507?title=0&amp;byline=0&amp;portrait=0&amp;color=e34d73" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> -->
        </div>
        <ul>
          <li class="music">
            <!-- <iframe style="border: 0; width: 170px; height: 313px;" src="//bandcamp.com/EmbeddedPlayer/album=2161956980/size=large/bgcol=ffffff/linkcol=333333/tracklist=false/transparent=true/" seamless><a href="http://lullatone.bandcamp.com/album/soundtracks-for-everyday-adventures">Soundtracks for Everyday Adventures by Lullatone</a></iframe> -->
          </li>
          <li class="poster">
            <a href="https://www.behance.net/gallery/Synesthesia/8354443" target="_blank">
              <div id="synesthesia" class="thumbnail"></div>
            </a>
            <div class="information">
              <p class="title">
                <a href="https://www.behance.net/gallery/Synesthesia/8354443" target="_blank"><strong>Synesthesia</strong></a>
              </p>
              <p class="artist">
                 by jonobr1
              </p>
              <p class="description">
                Take home a 27"x40" poster made with Patatap &mdash; $50.00
              </p>
              <p class="action">
                <a href="http://society6.com/jonobr1/Synesthesia-Zbs_Print#1=3" target="_blank">buy</a> <a href="https://www.behance.net/gallery/Synesthesia/8354443" target="_blank">share</a>
              </p>
            </div>
          </li>
          <li class="music">
            <!-- <iframe style="border: 0; width: 170px; height: 313px;" src="//bandcamp.com/EmbeddedPlayer/album=3832398802/size=large/bgcol=ffffff/linkcol=333333/tracklist=false/transparent=true/" seamless><a href="http://lullatone.bandcamp.com/album/while-winter-whispers">while winter whispers by Lullatone</a></iframe> -->
          </li>
          <li class="poster">
            <a href="https://www.behance.net/gallery/Anatomy-of-a-Polygon/12715463" target="_blank">
              <div id="two-polygon" class="thumbnail"></div>
            </a>
            <div class="information">
              <p class="title">
                <a href="https://www.behance.net/gallery/Anatomy-of-a-Polygon/12715463" target="_blank"><strong>Anatomy of a Polygon</strong></a>
              </p>
              <p class="artist">
                 by jonobr1
              </p>
              <p class="description">
                Support open-source, with a poster for <a href="http://jonobr1.github.com/two.js" target="_blank">Two.js</a> &mdash; $50.00
              </p>
              <p class="action">
                <a href="http://society6.com/jonobr1/Anatomy-of-a-Polygon_Print#1=3" target="_blank">buy</a> <a href="https://www.behance.net/gallery/Anatomy-of-a-Polygon/12715463" target="_blank">share</a>
              </p>
            </div>
          </li>
          <li class="music">
            <!-- <iframe style="border: 0; width: 170px; height: 313px;" src="//bandcamp.com/EmbeddedPlayer/album=1238287256/size=large/bgcol=ffffff/linkcol=333333/tracklist=false/transparent=true/" seamless><a href="https://lullatone.bandcamp.com/album/thinking-about-thursdays">Thinking About Thursdays by Lullatone</a></iframe> -->
          </li>
        </ul>
        <!-- Insert iOS App Store Button here -->
        <!-- <div class="app-cta-container">
          <a class="ios-app-store" href="https://itunes.apple.com/us/app/patatap/id880626868?ls=1&mt=8" target="_blank"></a>
          <a class="play-store" href="https://play.google.com/store/apps/details?id=com.jonobr1.Patatap" target="_blank"></a>
        </div> -->

        <!-- <div class="attribution">

          <p>
            If you like Patatap you might like our other project <a href="http://typatone.com" target="_blank">Typatone</a>.
          </p>
          <p class="nb">
            <a href="http://lullatone.com/" target="_blank">lullatone</a> &middot; <a href="http://about.jonobr1.com/" target="_blank">jonobr1</a> &middot; <a class="mailto" href="mailto:inquiries@patatap.com">inquiries</a> &middot; <a href="/privacy-policy.html" target="_blank">terms</a>
          </p>
          <p class="nb">
            &copy; 2014
          </p>

        </div> -->

      </div>
    </div>
    <div id="lobby">
      <div id="loader"></div>
      <div id="asset-info">
        <span id="loaded">0</span> / <span id="total-assets">26</span>
      </div>
    </div>
    <div class="scripts" style="display: none;">
      <script src="./third-party/has.js"></script>
      <script src="./third-party/url.js"></script>
      <script src="./third-party/jquery.js"></script>
      <script>

        /**
         * Check before loading JavaScript that we have the necessary features
         * in order to run the project. If we don't throw an error and display
         * the error page.
         */
        if (!Object.defineProperty || !(window.AudioContext || window.webkitAudioContext)) {
          $(function() {
            $('#lobby').fadeOut();
            $('#merchandise').css({
              opacity: 1.0,
              display: 'none',
              zIndex: 0
            }).fadeIn();
            $('#close-merchandise').css('display', 'none');
          });
          throw 'Oof, I cannot load this application because it will break...';
        }

      </script>
      <script src="./third-party/tween.js"></script>
      <script src="./third-party/two.js"></script>
      <script src="./src/sound.js"></script>
      <script src="./src/animations.js"></script>
      <script src="./src/main.js"></script>
      <script>
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

        ga('create', 'UA-48525045-1', 'patatap.com');
        ga('send', 'pageview');

      </script>
    </div>
  </body>
</html>
